<template>
	<div class="test">
		<!-- 顶部按钮 -->
        <el-button type="info" class="submit" @click="search" icon="search">查询</el-button>
        <el-button type="success" class="submit" @click="componentsShow('analyze',analyzeData)" icon="edit">分析</el-button>
		
		<i class="el-icon-close close" @click="cancel"></i>


		<el-form ref="form" :model="form" label-width="100px" class="add-class-form" label-position="right">
            <el-form-item label="考试类型：">
                <el-select v-model="form.test"  placeholder="请选择考试类型" class="select-block" @change="analyze">
                    <!-- <el-option label="asd" value="sad"></el-option> -->
                    <el-option :label="v.kslx ? v.kslx : v.zylx" :value="v.kslx ? v.kslx : v.zylx" v-for="v in testList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="DAY：" label-width="70px">
                <el-select v-model="form.type" placeholder="请选择类型" class="select-block" @change="analyze">
                    <!-- <el-option label="dsf" value="fg"></el-option> -->
                    <el-option :label="v.lx" :value="v.lx" v-for="v in typeList"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-button type="info" class="submit" @click="submit">查询</el-button> -->
	        <!-- <el-button @click="cancel" type="text">取消</el-button> -->
        </el-form>
        
    	<!-- <el-button type="info" class="submit" @click="componentsShow('analyze',analyzeData)">分析</el-button> -->
    	<!-- <el-button type="info" class="submit" @click="componentsShow('testEdit')">编辑</el-button> -->
    	<el-table :data="dataList" border stripe align="center" class="table" @selection-change="handleSelectionChange">
            <el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in dataHeaderList" align="center" min-width="130" show-overflow-tooltip></el-table-column>
            <el-table-column 
                label="操作" 
                width="100" 
                align="center"
                fixed="right">
                <template scope="scope">
                    <el-button type="text" class="submit" @click="componentsShow('testEdit', scope)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页查询区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>

        <!-- 分析组件 -->
		<AnalyzeComponent v-if="componentList.analyze.toggle"  @close="componentsHide"  :params="componentList.analyze.params" :data="data.distinction"></AnalyzeComponent>

		<!-- 编辑组件 -->
		<TestEditComponent v-if="componentList.testEdit.toggle"  @close="componentsHide" :type="data.distinction" :params="componentList.testEdit.params" :data="data.distinction"></TestEditComponent>
	</div>
</template>

<script type="text/javascript">
	import AnalyzeComponent from './analyze'
	import TestEditComponent from './test-edit'
	export default {
		components: { AnalyzeComponent, TestEditComponent },
		props: ['params', 'data'],
		data () {
			return {
				form: {
					test:'',
					type:''
				},
				analyzeData: {
					test: '',
					type: ''
				},
				testEditData: {},
				testList: [],
				typeList: [],
				dataHeaderList: [],
				dataList: [],

				/*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数

				componentList: {
					testEdit: {
	                    type: 'testEdit',
	                    toggle: false,
	                    params: '',
	                    data: {}
	                },
	                analyze: {
	                    type: 'analyze',
	                    toggle: false,
	                    params: '',
	                    data: {}
	                }
				}
				
			}
		},
		created () {
            this.$store.dispatch('changeTitle',this.data.distinction == 'test'?'考试成绩':'作业分数');//修改title
            this.$store.dispatch('changeRouterIndex','/admin/classlist');//修改路由

			this.getselectList();
			this.search();//数据查询
			
			if (this.data.distinction == 'test') {
				this.dataHeaderList = [
					{
						prop: 'bjmc',
                        label: '班级'
					},
					{
						prop: 'lszwm',
                        label: '老师中文名'
					},
					{
						prop: 'lsywm',
                        label: '老师英文名'
					},
					{
						prop: 'kslx',
                        label: '考试类型'
					},
					{
						prop: 'DAY',
                        label: 'DAY'
					},
					{
						prop: 'xszwm',
                        label: '学生中文名'
					},
					{
						prop: 'xsywm',
                        label: '学生英文名'
					},
					{
						prop: 'score',
                        label: '分数'
					}
				]
			}else{
				this.dataHeaderList = [
					{
						prop: 'bjmc',
                        label: '班级'
					},
					{
						prop: 'lszwm',
                        label: '老师中文名'
					},
					{
						prop: 'lsywm',
                        label: '老师英文名'
					},
					{
						prop: 'zylx',
                        label: '作业类型'
					},
					{
						prop: 'DAY',
                        label: 'DAY'
					},
					{
						prop: 'xszwm',
                        label: '学生中文名'
					},
					{
						prop: 'xsywm',
                        label: '学生英文名'
					},
					{
						prop: 'score',
                        label: '分数'
					}
				]
			}
			// console.log(dataHeaderList)
		},
		methods: {
			analyze () {
				this.analyzeData = {
					test: this.form.test,
					type: this.form.type
				}
			},
			edit () {

			},
			search () {
				if (this.data.distinction == 'test') {//考试成绩
					this.axios.get(this.$store.state.api + 'ksscore/xsScoreListxz', {
						params: {
							lx: this.form.type,
							kslx: this.form.test,
							pageindex: this.pageindex,
							pagesize: this.pagesize
						}
					}).then( res => {
						console.log(res)
						let data = res.data.data;
	                    let list = data.list;
	                    this.total = data.totalPage;
	                    this.dataList = list;
					})
				}else{//作业分数
					this.axios.get(this.$store.state.api + 'zyscore/getZyfs', {
						params: {
							lx: this.form.type,
							zylx: this.form.test,
							pageindex: this.pageindex,
							pagesize: this.pagesize
						}
					}).then( res => {
						console.log(JSON.stringify({
							lx: this.form.type,
							zylx: this.form.test
						}))
						console.log(res)
						let data = res.data.data;
	                    let list = data.list;
	                    this.total = data.totalPage;
	                    this.dataList = list;
					})
				}
				
			},
			cancel () {
				if (this.data.distinction == 'test') {
					this.$emit("close",{type:"test",cancel:true})
				}else{
					this.$emit("close",{type:"score",cancel:true})
				}
				
			},

			getselectList () {

				if (this.data.distinction == 'test') { //考试成绩
					this.axios.get(this.$store.state.api + 'ksscore/getKslx')
						.then( res => {
							// console.log(res)
							this.testList = res.data.data.list;
						})

					this.axios.get(this.$store.state.api + 'ksscore/getLx')
						.then( res => {
							// console.log(res)
							this.typeList = res.data.data.list;
						})
				}else{//作业分数
					this.axios.get(this.$store.state.api + 'zyscore/getZylx')
						.then( res => {
							console.log(res)
							this.testList = res.data.data.list;
						})

					this.axios.get(this.$store.state.api + 'zyscore/getLx')
						.then( res => {
							console.log(res)
							this.typeList = res.data.data.list1;
						})
				}
				
			},

			handleSelectionChange () {

			},

			handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
			componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.componentList ) {
                    if (type == this.componentList[i].type) {
                        console.log(this.componentList[i])

                        this.componentList[i].toggle = true;
                        this.componentList[i].params = data;
                        return;
                    }
                }
                console.log(this.componentList)

            },
			componentsHide (setting) { //关闭组件
                console.log(setting)
                for ( let i in this.componentList ) {
                    if (setting.type == this.componentList[i].type) {
                        this.componentList[i].toggle = false;
		                this.search();
                        return;
                    }
                }
            }
		}

	}
</script>

<style lang="less" scoped>
	.test {
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;left:0;
		background: #E8EDF0;
		z-index: 99;

		.add-class-form {
			margin-top:10px;
		}

		.el-form-item {
			display: inline-block;
		}
	
		.submit {
			padding: 7px 15px;
		}

		.table {
			// margin-top:20px;
		}
	}
</style>